<html>
	<head><title>Charles' Charts</title>

		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
			
			canvas { 
				width: 100%; 
				height: 100%;
			}
		</style>
	</head>
	<body>
		<script src="libs/jquery-1.11.0.min.js"></script>
		<script src="libs/parser.js"></script>
		<script src="libs/libcharts.js"></script>
		<script src="libs/dat.gui.min.js"></script>
		<script src="libs/three.min.js"></script>
		<script src="libs/stats.min.js"></script>
		<script src="libs/controls/TrackballControls.js"></script>
		<script src="libs/fonts/helvetiker_regular.typeface.js"></script>
		<script src="libs/textutils.js"></script>
		<script src="libs/utils.js"></script>

	<body>
		<script type="text/x-glsl" id="vertex">
		varying vec3 transformedNormal;
		varying vec3 pointPosition;
		varying vec3 lightVector;
		uniform vec3 pointLightPosition;

		void main()
		{
			transformedNormal = normalMatrix * normal;
			pointPosition = (modelViewMatrix * vec4( position, 1.0 )).xyz;
			vec4 lPosition = viewMatrix * vec4( pointLightPosition, 1.0 );
			lightVector = lPosition.xyz - pointPosition;
			gl_Position = projectionMatrix * vec4(pointPosition,1.0);
		}
		</script>
		
		<script type="text/x-glsl" id="ct-fragment">
			uniform vec3 lightPower;
			uniform vec3 ambient;
			uniform vec3 Kd;
			uniform vec3 Ks;
			uniform float m;
			uniform float s;
			varying vec3 transformedNormal;
			varying vec3 pointPosition;
			varying vec3 lightVector;

			#define PI 3.14159265	

			float G(float NdotH, float NdotV, float VdotH, float NdotL)
			{
				float G1 = 2.0 * NdotH * NdotV / VdotH;
				float G2 = 2.0 * NdotH * NdotL / VdotH;
				return min( 1.0, min( G1, G2 ));
			}

			// Fresnel
			vec3 R_F(float VdotH) {
				return Ks + (1.0 - Ks)*pow(1.0-VdotH, 5.0);
			}

			// Beckmann
			float Beckmann(float NdotH){
				float A = 1.0 / (pow(m,2.0)+pow(NdotH,4.0)*PI);
				float B = exp( - pow( tan(acos(NdotH)) , 2.0) / pow(m,2.0));
				return A*B;
			}

			void main()
			{
				vec3  n      		 	= normalize( transformedNormal );  
				vec3  v         		= normalize( -pointPosition );  
				vec3  l         		= normalize(  lightVector );  
				vec3  h          		= normalize( v+l );  
				float  NdotH    		= max(0.0, dot( n, h ));  
				float  VdotH     		= max(0.0, dot( v, h ));  
				float  NdotV 			= max(0.0, dot( n, v ));  
				float  NdotL 			= max(0.0, dot( n, l ));
				vec3 Specular = (Beckmann(NdotH) * G(NdotH, NdotV, VdotH, NdotL) * R_F(VdotH)) / ( NdotL* NdotV);
				vec3 beta = lightPower / ( 4.0  * PI * pow( length(lightVector),2.0) );
				gl_FragColor = vec4(beta * NdotL * ((1.0-s)*Kd + s*Specular) + ambient*Kd, 1.0);
			}
			
		</script>
		<script>
			var FizzyText = function() {
				this.Type = 'Bar';
				this.Example = 'Small';
                this.Material = 'Metals';
                this.enableShadows = false;
			};
			
			/*
			 * jquery
			 */
			$( document ).ready(function() {
				//threejs
				var scene;
				var camera;
				var renderer;
				initScene();
				
				//gui
				var text = new FizzyText();
				var gui = new dat.GUI();
				var typeController = gui.add(text, 'Type', [ 'Bar', 'Area', 'Pie' ] );
				var exampleController = gui.add(text, 'Example', [ 'Small', 'Medium', 'Big', 'Similar Values', 'Wide labels' ] );
                var materialController = gui.add(text, 'Material', [ 'Metals', 'Phong' ] );
                var enableShadowsController = gui.add(text, 'enableShadows' );
				
				typeController.onFinishChange(function(value) {
					generateChart(text.Type, text.Example, text.Material, text.enableShadows);
				});
				
				exampleController.onFinishChange(function(value) {
					generateChart(text.Type, text.Example, text.Material, text.enableShadows);
				});
				
				materialController.onFinishChange(function(value) {
					generateChart(text.Type, text.Example, text.Material, text.enableShadows);
				});
                
                enableShadowsController.onFinishChange(function(value) {
                    generateChart(text.Type, text.Example, text.Material, text.enableShadows);
                });
				
				function generateChart(type, example, mat, shadows)
				{
					clearScene();
					
					var filestring;
					
					switch(example){
						case 'Small':
							filestring = "csv/small.csv";
							break;
						case 'Medium':
							filestring = "csv/medium.csv";
							break;
						case 'Big':
							filestring = "csv/big.csv";
							break;
						case 'Similar Values':
							filestring = "csv/similar.csv";
							break;
						case 'Wide labels':
							filestring = "csv/wide_labels.csv";
							break;
						default:
							break;
					}
					
					$.get(filestring, function (data) { showChart(data,type,mat,shadows); });
				}
				
				function showChart(csvfile, type, mat,shadows)
				{
					var file = fromCsvToAssociative(csvfile);
					
					if(type == 'Bar'){
						barChart(file, mat, shadows);
					} else if (type == 'Area') {
						areaChart(file, mat, shadows);
					} else if (type == 'Pie') {
						pieChart(file, mat);
					} else {
						alert('unknown error!');
					}
				}
			});
		</script>
	</body>
</html>
